<template>
    <div>
        <el-card>
            <el-table
                :data="userInfo"
                style="width: 100%">
                <el-table-column prop="date" label="用户名">
                    <template slot-scope="scope">
                        {{scope.row.userName}}
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="被赞数量">
                    <template slot-scope="scope">
                        {{scope.row.beizan}}
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="粉丝数量">
                    <template slot-scope="scope">
                        {{scope.row.fansh.length}}
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="邮箱地址">
                    <template slot-scope="scope">
                        {{scope.row.email}}
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="状态">
                    <template slot-scope="scope">
                        <el-radio-group @change="handleState(scope.row)" v-model="scope.row.state">
                            <el-radio :label="0">关闭</el-radio>
                            <el-radio :label="1">开启</el-radio>
                        </el-radio-group>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="权限">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.role == 'normal'">普通用户</el-tag>
                        <el-tag v-else type="danger">超级管理员</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="操作">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="分配权限" placement="top-start">
                            <el-button @click="showDialogVisible(scope.row.role, scope.row._id)" type="info" icon="el-icon-user" circle></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="删除用户" placement="top-start">
                            <el-button @click="removeUser(scope.row._id)" type="danger" icon="el-icon-delete" circle></el-button>
                        </el-tooltip>
                        
                    </template>
                </el-table-column>
            </el-table>
        </el-card>


        <!-- 分配权限对话框 -->
        <el-dialog
          title="分配权限"
          :visible="dialogVisible"
          @close="visibleDialogVisible"
          destroy-on-close
          width="30%">
            <div class="tips_role">当前用户权限：{{currentUserRole == 'normal' ? '普通用户' : '超级管理员'}}</div>
            <el-select v-model="currentRole" placeholder="请分配权限">
                <el-option
                  v-for="item in roleSelect"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
            </el-select>
          <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitRole">确 定</el-button>
          </span>
        </el-dialog>





    </div>
</template>

<script>
import { onMounted, ref } from '@vue/composition-api';
import axios from 'axios';
export default {
    setup (props, context) {

        axios.defaults.baseURL = 'http://localhost:3000';

        onMounted(() => {
            getUserInfo();
        })

        // 用户信息
        const userInfo = ref([]);
        // 获取用户信息
        const getUserInfo = async function () {
            let { data: res } = await axios.get('/get/user/info');
            if (res.status != 200)
                return context.parent.$message.error('获取用户信息失败，请刷新后重试');
            userInfo.value = res.userAll;
        }

        // 改变用户状态
        const handleState = async function (user) {
            let { data: res } = await axios.post(`/user/user/state/${user.state}/${user._id}`);
            if (res.status != 200)
                return context.parent.$message.error('修改状态失败，请刷新后重试');

            user = res.newuser;
            context.parent.$message.success('修改用户状态成功');
        }

        // 分配权限对话框的显示与隐藏
        const dialogVisible = ref(false);
        // 显示对话框
        const showDialogVisible = function (role, id) {
            dialogVisible.value = true;
            currentUserRole.value = role;
            currentUserID.value = id;
            currentRole.value = role == 'normal' ? '普通用户' : '超级管理员';
        }
        // 隐藏对话框
        const visibleDialogVisible = function () {
            dialogVisible.value = false;
        }

        // 当前的用户权限
        const currentUserRole = ref('');
        // 当前用户的ID
        const currentUserID = ref('');
        // 分类权限选择器
        const roleSelect = ref(['普通用户', '超级管理员']);
        // 当前选择的权限
        const currentRole = ref('');

        // 提交修改权限
        const submitRole = async function () {
            if (currentRole.value.trim().length === 0)
                return context.parent.$message.error('请选择权限后，再提交修改');
            let { data: res } = await axios.post(`/user/role/${currentUserID.value}/${currentRole.value}`);
            if (res.status != 200)
                return context.parent.$message.error('修改权限失败，请关闭后重试');

            context.parent.$message.success('修改权限成功');
            userInfo.value = res.newuser;
            dialogVisible.value = false;
            currentRole.value = '';
        }

        // 删除用户
        const removeUser = async function (id) {
            if (confirm('确定删除?')) {
                let { data: res } = await axios.delete(`/user/remove/${id}`);
                if (res.status != 200)
                    return context.parent.$message.error(res.msg);
                context.parent.$message.success(res.msg);
                userInfo.value = res.newuser;
            } else {
                context.parent.$message.info('取消了删除操作');
            }
                 

        }

        const methods = { handleState, showDialogVisible, visibleDialogVisible, submitRole, removeUser }

        return {
            ...methods,
            userInfo,
            dialogVisible,
            roleSelect,
            currentRole,
            currentUserRole
        }
    }
}
</script>

<style lang="less" scoped>
.tips_role {
    margin-bottom: 12px;
}
</style>